<template>
  <div class="box">
    <header class="header">
      <van-nav-bar
        title="登录"
        left-arrow
        @click-left="$router.back()"
      >
      </van-nav-bar>
    </header>
    <div class="content">
      <van-field v-model="loginname"  placeholder="用户名/手机号/邮箱" clearable/>
      <van-field v-model="password"  placeholder="请输入密码" clearable/>
      至少为6位，至少包含一个大写字母和一个小写字母，包含数字
      <van-button :disabled="flag" type="danger" block @click="login" >登录</van-button>
      <router-link to="/reg_step1">快速注册</router-link>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import { Field, Button, NavBar, Toast, Dialog } from 'vant'
import { getStorage } from '@/utils/storage'
// import { loginFn } from '@/api/user'
import { mapActions } from 'vuex'
Vue.use(Field)
Vue.use(Button)
Vue.use(NavBar)
Vue.use(Toast)
Vue.use(Dialog)
export default {
  data () {
    return {
      loginname: getStorage('tel') || '',
      password: this.password
    }
  },
  computed: {
    flag () {
      const reg = /^\S*(?=\S{6,})(?=\S*\d)(?=\S*[A-Z])(?=\S*[a-z])\S*$/
      return this.loginname.trim() === '' || !reg.test(this.password)
    }
  },
  methods: {
    ...mapActions({
      loginFn: 'user/loginAction'
    }),
    login () {
      const res = this.loginFn({ loginname: this.loginname, password: this.password })
      if (res === '10010') {
        // 账户不存在，弹出框提示是否跳转到注册
        Dialog.confirm({
          title: '登录提示',
          message: '该账户不存在，是否注册',
          confirmButtonText: '直接注册'
        })
          .then(() => {
            this.$router.push('/reg_step1')
          })
          .catch(() => {
            // on cancel
          })
      } else if (res === '10011') {
        Toast('密码错误')
      } else {
        this.$router.back()
      }
    }
  }
}
</script>
